<template>
    <div class="cgs-card"
         @mouseleave.stop = "extendShow = false"
         :style="{height: height + 'px'}"
         ref="cgsCard"
    >
        <div class="card-view flex-row no-select"
             :class="{shadow: (isEnter && showMask)}"
             @mouseenter.stop = "isEnter = true"
             @mouseleave.stop = "isEnter = false"
        >
            <img v-if="appData.backgroundUrl"
                 :src="appData.backgroundUrl"
                 class="card-img"
                 alt="" />
            <div v-show="appData.status === 1" class="card-status no-select">已发布</div>
            <div v-show="appData.status !== 1" class="card-status no-select">未发布</div>
        </div>

        <div class="card-extend no-select" :class="{shadow: (isEnter && showMask)}" @click.stop="extendShow = !extendShow">⋮</div>
        <div v-show="extendShow" class="card-extend-content">
            <div class="card-extend-item no-select"
                 v-show="appData.appAuths.MANAGE_APP_AUTH"
                 @click.stop="$emit('authority', $event)"
            >
                <span class="iconfont cgsIcon-quanxian card-icon"/>
                权限
            </div>
            <div class="card-extend-item no-select"
                 v-show="appData.appAuths.DELETE_PORTAL_VISUAL"
                 @click.stop="$emit('delete-app', $event)"
            >
                <span class="iconfont cgsIcon-shanchu card-icon"/>
                删除
            </div>
            <div class="card-extend-item no-select"
                 v-show="appData.appAuths.EDIT_PORTAL_VISUAL"
                 @click.stop="$emit('modify', $event)"
            >
                <span class="iconfont cgsIcon-xiugai card-icon"/>
                修改
            </div>
            <div class="card-extend-item no-select"
                 v-show="appData.appAuths.PREVIEW_PORTAL_VISUAL"
                 @click.stop="$emit('preview', $event)"
            >
                <span class="iconfont cgsIcon-yulan card-icon"/>
                预览
            </div>
            <div class="card-extend-item no-select"
                 v-show="appData.appAuths.EXPORT"
                 @click.stop="$emit('export-app', $event)"
            >
                <span class="iconfont cgsIcon-daochu card-icon"/>
                导出
            </div>
        </div>
        <div class="card-button no-select"
             v-show="isEnter && showMask"
             @mouseenter.stop = "isEnter = true"
             @click.stop="$emit('editor', $event)"
        >
            编辑
        </div>
        <div class="card-title">
            <slot name="title"></slot>
        </div>
    </div>
</template>
<script>
    export default {
        name: "CgsCard",
        props: {
            appData: Object,
            showMask: Boolean
        },
        data() {
            return {
                extendShow: false,
                isEnter: false,
                height: 240,
                eventListener: null
            }
        },
        mounted() {
            this.height = this.$refs.cgsCard.clientWidth * 2 / 3;
            this.eventListener = window.addEventListener('resize', () => {
                if (!this.$refs.cgsCard) {
                    return
                }
                this.getHeight(this.$refs.cgsCard.clientWidth)
            }, false)
        },
        methods: {
            getHeight(clientWidth) {
                this.height = clientWidth * 2 / 3;
            }
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.eventListener)
        }
    }
</script>

<style scoped>
    .cgs-card {
        font-weight: 400;
        width: 100%;
        border-radius: 3px;
        position: relative;
    }
    .card-view {
        width: 94%;
        height: 80%;
        margin: 3% auto;
        position: relative;
        justify-content: space-between;
    }
    .card-img {
        width: 100%;
        height: 100%;
    }
    .shadow {
        filter: blur(3px);
    }
    .card-button {
        width: 88px;
        height: 36px;
        background: #4C84FF;
        color: #fff;
        border-radius: 2px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -46px;
        margin-left: -44px;
    }
    .card-button:hover {
        background: #79A3FF;
    }
    .card-status {
        width: 60px;
        height: 22px;
        font-size: 12px;
        line-height: 22px;
        text-align: center;
        position: absolute;
        top: 10px;
    }
    .card-extend {
        width: 22px;
        height: 22px;
        background-position: center;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        text-align: center;
    }
    .card-extend-content {
        position: absolute;
        width: 100px;
        cursor: pointer;
        right: 30px;
        top: 42px;
    }
    .card-extend-item {
        padding: 6px 15px;
        width: 100%;
        height: 36px;
        cursor: pointer;
        font-size: 14px;
        line-height: 24px;
    }
    .card-icon {
        margin: 0 10px 0 0;
        font-size: 12px;
        font-weight: 500;
    }
    .card-title {
        width: 100%;
        font-size: 14px;
        padding: 0 10px 5px;
        white-space:nowrap; 
        overflow:hidden; 
        text-overflow:ellipsis;
    }
</style>
